<!-- 分销——提现记录 -->
<template>
	<view class="withdrawal-records">
		<sunui-navbar
		     v-if="navBarSelect"
			:items="tabList"
			lineHeight="70rpx"
			:isCenter="true"
			:currentIndex="currentIndex"
			:size="200"
			fontSize="32rpx"
			activeFontSize="32rpx"
			activeLineBg="#26C278"
			textAlign="center"
			activeColor="#26C278"
			activeLineWidth="20%"
			activeDirection="center"
			activeLineHeight="6rpx"
			bgColor="#fff"
			:margin="10"
			@change="getChange"
		></sunui-navbar>
		<view class="flex-between padding30">
			<view class="flex-align-center screen-cls">
				<!-- 未入账/已完成 等类型筛选 -->
				<!-- <view>全部</view>
				<image mode="heightFix" src="/static/right-arrow.png"></image> -->
			</view>
			<view class="flex-align-center screen-cls">
				
				<picker mode="date" fields="month" :value="date"  :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="flex-align-center color6" >
						{{ yeartime }}
						<text>-</text>
						{{ monthtime }}
						
					</view>
				
				</picker>
				<image mode="heightFix" src="/static/right-arrow.png"></image>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
				@up="upCallback" >
			<block v-for="(i, j) in list" :key="j">
				<view class="card-cls">
					<view class="card-title flex-between">
						<view>{{ i.enabledNot == 1 ? zfbCustomName:wxCustomName }}提现</view>
						<text>￥{{ i.withdrawActualAmount }}</text>
					</view>
					<view class="flex-between p-bottom34">
						<text>申请时间</text>
						<view>{{formattedDate(i.createdAt ) }}</view>
					</view>
					<view class="flex-between p-bottom34">
						<text>提现金额</text>
						<view>￥{{ i.withdrawAmount }}</view>
					</view>
					<view class="flex-between p-bottom34">
						<text>手续费</text>
						<view>￥{{ i.serviceCharge }}</view>
					</view>
					<view class="flex-between p-bottom34">
						<text>订单编号</text>
						<view>{{ i.withdrawOrderNumber }}</view>
					</view>
					<view class="flex-between p-bottom34">
						<text>提现状态</text>
						<view :class="i.status == 1 ? 'green' : i.status == 3 ? 'red' : ''">{{ i.status == 1 ? '提现中' : i.status == 2 ? '已完成' : '已驳回' }}</view>
					</view>
					<view class="flex-between p-bottom34" v-show="i.status == 3">
						<text>驳回原因</text>
						<view style="max-width: 400rpx;" class="font-overflow3 ">{{ i.reasonForRejection }}</view>
					</view>
				</view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	
	import moment from 'moment'
export default {
	 
	data() {
		const currentDate = this.getDate({
			format: true
		});
		
		return {
			zfbCustomName:uni.getStorageSync('withdrawalMethod').zfbCustomName?uni.getStorageSync('withdrawalMethod').zfbCustomName:'线下提现',
			wxCustomName:uni.getStorageSync('withdrawalMethod').wxCustomName?uni.getStorageSync('withdrawalMethod').wxCustomName:'微信',
			tabList: [
				{
					name: '全部',
					id: 1
				},
				{ name: uni.getStorageSync('withdrawalMethod').zfbCustomName?uni.getStorageSync('withdrawalMethod').zfbCustomName:'线下提现',
					
					id: 2
				},
				{
					name: uni.getStorageSync('withdrawalMethod').wxCustomName?uni.getStorageSync('withdrawalMethod').wxCustomName:'微信',
					id: 2
				}
			],
			list:[],
			currentIndex: 0, //自定义索引
			enabledNot:null,
			//选择的年份
			yeartime: currentDate.split('-')[0],
			//选择的月份
			monthtime: currentDate.split('-')[1],
			//选择的天数
			// daytime: currentDate.split('-')[2],
			// 选择的日期
			time:'',
			navBarSelect:false
			
		};
	},
	onLoad() {
		this.navBarSelect=uni.getStorageSync('withdrawalMethod').withdrawalMethod==1?true:false
		
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
	// 时间格式化
	formattedDate () {
	  return (params) => {
	    const currentDate = moment(params);
	    const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
	    return formattedDate;
	  };
	},
	},
	methods: {
		
		// 选择日期
		bindDateChange: function(e) {
			this.date = e.target.value;
			/* 在上面声明变量，split是用来截取字段*/
			this.yeartime = this.date.split('-')[0];
			this.monthtime = this.date.split('-')[1];
			// this.daytime = this.date.split('-')[2];
			this.time = this.yeartime + '-' + this.monthtime ;
			this.mescroll.resetUpScroll();
		},
		
		// 日期获取
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
				
			month = month > 9 ? month : '0' + month;
			// day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		},
		// 获取tabList数据
		getChange(index) {
			this.currentIndex = index;
			if(index==0){
			  this.enabledNot=''
			}else{
			  this.enabledNot=index
			}
			
			// this.upCallback(this.mescroll);
			
			this.mescroll.resetUpScroll();
		},
		
	
		// // 申请提现列表（用户/公众号）
		async upCallback(scroll) {
				this.time = this.yeartime + '-' + this.monthtime ;
				console.log(this.time)
			const result=await this.$http.get({
				url: this.$api.technicianWithdrawal,
				data: {
					page: scroll.num,
					limit: 10,
					enabledNot:this.enabledNot?this.enabledNot:uni.getStorageSync('withdrawalMethod').withdrawalMethod==1?'':uni.getStorageSync('withdrawalMethod').withdrawalMethod==2?1:2,
			
					createdAt:this.time?this.time:'',
					userId: uni.getStorageSync('userId')
				}
			});
			if (result.code == 200) {
				console.log('申请提现列表result.', result);
		
				this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
				if (scroll.num == 1) this.list = [];
				this.list = this.list.concat(result.data.list);
				console.log("this.list",this.list,this.list.length)
			}

		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f7f7;
}
.withdrawal-records {
	.screen-cls {
		view {
			color: #999;
			margin-right: 6rpx;
		}
		image {
			height: 24rpx;
		}
	}
	.card-cls {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 22rpx 34rpx 0rpx;
		margin: 0 24rpx 20rpx;
		.card-title {
			padding-bottom: 20rpx;
			margin-bottom: 18rpx;
			border-bottom: 2rpx solid #d9d9d9;
			view {
				font-size: 32rpx;
			}
			text {
				font-size: 32rpx;
				color: #f00;
			}
		}
		.p-bottom34 {
			padding-bottom: 34rpx;
			text {
				font-size: 24rpx;
				color: #666;
			}
			view {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>
